<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JM COM</title>
    <script src="./public/js/flexible.js"></script>
    <link rel="stylesheet" href="./public/css/bootstrap.min.css">
    <link rel="stylesheet" href="./public/css/index.css">
</head>

<body>
<div>
    <div class="head-box">
        <span>&nbsp;&nbsp;</span> <img src="./public/img/status.png" class="img26"><span style="margin-top: 8px;">当前状态</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <img src="./public/img/firmware.png" class="img26"><span style="margin-top: 8px;">升级固件</span>
    </div>
        <hr style="margin-top: 1px;margin-bottom: 1px;">
    <div class="body-box">
        <div class="tool-bar">
            <div class="select-data">
                <div class="form-group">
                    <label for="disabledSelect">选择串口</label>
                    <select id="disabledSelect" class="form-control com">
                    </select>
                </div>
                <div class="form-group">
                    <label for="BaudRate">波特率</label>
                    <input type="text" class="form-control" id="BaudRate" value="9600">
                </div>
            </div>
            <div class="submit-data">
                <button class="btn btn-primary btn-block btn-submit">确定</button>
            </div>
            <div>
                <img id="usbstatus" src="./public/img/usb3.png" alt="">
            </div>
            <div>
                <div id="animated">
                  <div class="battery"></div>
                  
                </div>          
                <div class="batterypercent"><span id="batteryw">0%</span></div>     
            </div>
            <div style="display: none;">
            版本 <span id="node-version"></span>, Chromium <span id="chrome-version"></span>, Electron <span id="electron-version"></span>, and Serialport <span id="serialport-version"></span>
            </div>
            <div id="error"></div>
            <div id="ports"></div>
        </div>
        <div class="content-box">
            <div class="receive-box">
                <div class="send-header">
                    <label>当前状态</label>
                </div>
                <div>
                    <div class="statusdiv table-c">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
                            <tr> 
                                <td width="105">名称</td> 
                                <td width="181">值</td> 
                                <td width="112">单位</td> 
                                <td width="112"> &nbsp;&nbsp;</td> 
                            </tr> 
                            <tr> 
                                <td>总电压</td> 
                                <td><span id="aa">0</span></td> 
                                <td>mV</td> 
                                <td>&nbsp;&nbsp;</td> 
                            </tr> 
                            <tr> 
                                <td>平均电压</td> 
                                <td><span id="ab">0</span></td> 
                                <td>mV</td> 
                                <td>&nbsp;&nbsp;</td> 
                            </tr> 
                            </tr> 
                            <tr> 
                                <td>最小电压</td> 
                                <td><span id="ac">0</span></td> 
                                <td>mV</td> 
                                <td>&nbsp;&nbsp;</td> 
                            </tr> 
                            </tr> 
                            <tr> 
                                <td>最大电压</td> 
                                <td><span id="ad">0</span></td> 
                                <td>mV</td> 
                                <td>&nbsp;&nbsp;</td> 
                            </tr> 
                            </tr> 
                            <tr> 
                                <td>最小电压通道</td> 
                                <td><span id="ae">0</span></td> 
                                <td></td> 
                                <td>&nbsp;&nbsp;</td> 
                            </tr> 
                            </tr> 
                            <tr> 
                                <td>最大电压通道</td> 
                                <td><span id="af">0</span></td> 
                                <td></td> 
                                <td>&nbsp;&nbsp;</td> 
                            </tr> 
                            </tr> 
                            <tr> 
                                <td>断线信息</td> 
                                <td><span id="ag">0</span></td> 
                                <td></td> 
                                <td>&nbsp;&nbsp;</td> 
                            </tr> 
                            </tr> 
                            <tr> 
                                <td>均衡状态</td> 
                                <td><span id="ah">0</span></td> 
                                <td></td> 
                                <td>&nbsp;&nbsp;</td> 
                            </tr> 
                        </table> 		                                
                    </div>
                    <div class="statusdiv table-c">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
                            <tr> 
                                <td width="105">名称</td> 
                                <td width="181">值</td> 
                                <td width="112">单位</td> 
                                <td width="112"> &nbsp;&nbsp;</td> 
                            </tr> 
                            <tr> 
                                <td>电流</td> 
                                <td><span id="ba">0</span></td> 
                                <td>mA</td> 
                                <td>&nbsp;&nbsp;</td> 
                            </tr> 
                            <tr> 
                                <td>平均电流</td> 
                                <td><span id="bb">0</span></td> 
                                <td>mA</td> 
                                <td>&nbsp;&nbsp;</td> 
                            </tr> 
                            <tr> 
                                <td>平均温度</td> 
                                <td><span id="bc">0</span></td> 
                                <td>mV</td> 
                                <td>&nbsp;&nbsp;</td> 
                            </tr> 
                            <tr> 
                                <td>最低温度</td> 
                                <td><span id="bd">0</span></td> 
                                <td>℃</td> 
                                <td>&nbsp;&nbsp;</td> 
                            </tr> 
                            <tr> 
                                <td>最高温度</td> 
                                <td><span id="be">0</span></td> 
                                <td>℃</td> 
                                <td>&nbsp;&nbsp;</td> 
                            </tr> 
                            <tr> 
                                <td>最低温度通道</td> 
                                <td><span id="bf">0</span></td> 
                                <td></td> 
                                <td>&nbsp;&nbsp;</td> 
                            </tr> 
                            <tr> 
                                <td>最高温度通道</td> 
                                <td><span id="bg">0</span></td> 
                                <td></td> 
                                <td>&nbsp;&nbsp;</td> 
                            </tr> 
                            <tr> 
                                <td>相对SOC</td> 
                                <td><span id="bh">0</span></td> 
                                <td>%</td> 
                                <td>&nbsp;&nbsp;</td> 
                            </tr> 
                        </table> 		                                
                    </div>
                    <div class="statusdiv table-c">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
                            <tr> 
                                <td width="105">名称</td> 
                                <td width="181">值</td> 
                                <td width="112">单位</td> 
                                <td width="112"> &nbsp;&nbsp;</td> 
                            </tr> 
                            <tr> 
                                <td>绝对SOC</td> 
                                <td><span id="ca">0</span></td> 
                                <td>%</td> 
                                <td>&nbsp;&nbsp;</td> 
                            </tr> 
                            <tr> 
                                <td>设计容量</td> 
                                <td><span id="cb">0</span></td> 
                                <td>mAh</td> 
                                <td>&nbsp;&nbsp;</td> 
                            </tr> 
                            <tr> 
                                <td>满充容量</td> 
                                <td><span id="cc">0</span></td> 
                                <td>mAh</td> 
                                <td>&nbsp;&nbsp;</td> 
                            </tr> 
                            <tr> 
                                <td>剩余容量</td> 
                                <td><span id="cd">0</span></td> 
                                <td>mAh</td> 
                                <td>&nbsp;&nbsp;</td> 
                            </tr> 
                            <tr> 
                                <td>循环周期</td> 
                                <td><span id="ce">0</span></td> 
                                <td>min</td> 
                                <td>&nbsp;&nbsp;</td> 
                            </tr> 
                            <tr> 
                                <td>实际剩余时间</td> 
                                <td><span id="cf">0</span></td> 
                                <td>min</td> 
                                <td>&nbsp;&nbsp;</td> 
                            </tr> 
                            <tr> 
                                <td>平均剩余时间</td> 
                                <td><span id="cg">0</span></td> 
                                <td>min</td> 
                                <td>&nbsp;&nbsp;</td> 
                            </tr> 
                            <tr> 
                                <td>平均充满时间</td> 
                                <td><span id="ch">0</span></td> 
                                <td>min</td> 
                                <td>&nbsp;&nbsp;</td> 
                            </tr> 
                            <tr> 
                                <td>pack输出电压</td> 
                                <td><span id="ci">0</span></td> 
                                <td>mV</td> 
                                <td>&nbsp;&nbsp;</td> 
                            </tr> 
                        </table> 		                                
                    </div>
                </div>


                <div>
                </div>

            </div>
            <div class="send-header">
                        <label>状态标识</label>
            </div>
            <div class="send-btn">
                        <div class="markdiv">
                            <p>电池保护信息1</p>
                            <ul>
                                <li id="ea"><span>欠压保护</span></li>
                                <li id="eb"><span>欠压严重保护</span></li>
                                <li id="ec"><span>欠压硬件保护</span></li>
                                <li id="ed"><span>过压保护</span></li>
                                <li id="ef"><span>过压严重保护</span></li>
                                <li id="eg"><span>过压硬件保护</span></li>
                                <li id="eh"><span>总电压低压保护</span></li>
                                <li id="ei"><span>总电压高压保护</span></li>
                                <li id="ej"><span>放电过流保护</span></li>
                                <li id="ek"><span>严重放电过流保护</span></li>
                                <li id="el"><span>硬件放电过流保护</span></li>
                                <li id="em"><span>放电短路保护</span></li>
                                <li id="en"><span>充电过流保护</span></li>
                                <li id="eo"><span>严重充电过流保护</span></li>
                                <li id="ep"><span>硬件充电过流保护</span></li>
                                <li id="ep"><span>充电短路保护</span></li>
                            </ul>
                        </div>
                        <div class="markdiv">
                            <p>电池保护信息2</p>
                            <ul>
                                <li id="fa"><span>放电低温保护</span></li>
                                <li id="fb"><span>放电高温保护</span></li>
                                <li id="fc" style="color: red;"><span>充电低温保护</span></li>
                                <li id="fd" style="color: red;"><span>充电高温保护</span></li>
                                <li id="fe" style="color: red;"><span>MOS过温保护</span></li>
                                <li id="ff"><span>SOC低保护</span></li>
                                <li id="fg"><span>放电过流保护锁定</span></li>
                                <li id="fh"><span>充电过流保护锁定</span></li>
                                <li id="fi"><span>短路保护锁定</span></li>
                            </ul>
                        </div>
                        <div class="markdiv">
                            <p>电路故障信息</p>
                            <ul>
                                <li id="ga"><span>放电MOS失效故障</span></li>
                                <li id="gb"><span>充电MOS失效故障</span></li>
                                <li id="gc"><span>电压前端采样故障</span></li>
                                <li id="gd"><span>电压采样断线故障</span></li>
                                <li id="ge"><span>温度采样电路故障</span></li>
                                <li id="gf"><span>均衡电路故障</span></li>
                                <li id="gg"><span>低压关机故障</span></li>
                                <li id="gh"><span>参数配置错误故障</span></li>
                                <li id="gi"><span>设备并联故障</span></li>
                                <li id="gj"><span>电流采样电路故障</span></li>
                                <li id="gk"><span>预充电路故障</span></li>
                                <li id="gl"><span>外设通讯设备1故障</span></li>
                                <li id="gm"><span>外设通讯设备2故障</span></li>
                                <li id="gn"><span>外设通讯设备3故障</span></li>
                                <li id="go"><span>充电器故障</span></li>
                            </ul>
                        </div>
                        <div class="markdiv">
                            <p>电池告警信息</p>
                            <ul>
                                <li id="ha"><span>欠压告警</span></li>
                                <li id="hb"><span>过压告警</span></li>
                                <li id="hc"><span>放电过流告警</span></li>
                                <li id="hd"><span>充电过流告警</span></li>
                                <li id="he"><span>放电低温告警</span></li>
                                <li id="hf"><span>放电高温告警</span></li>
                                <li id="hg"><span>充电低温告警</span></li>
                                <li id="hh"><span>充电高温告警</span></li>
                                <li id="hi"><span>充电截止</span></li>
                                <li id="hj"><span>放电高温限流告警</span></li>
                                <li id="hk"><span>充电高温限流告警</span></li>
                                <li id="hl"><span>MOS过温告警</span></li>
                                <li id="hm"><span>风扇故障告警</span></li>
                                <li id="hn"><span>加热系统故障告警</span></li>
                                <li id="ho"><span>电芯失衡告警</span></li>
                                <li id="hp"><span>剩余容量告警</span></li>
                            </ul>
                        </div>
                        <div class="markdiv">
                            <span>电池状态1</span>
                            <ul>
                                <li id="ia"><span>剩余时间告警</span></li>
                                <li id="ib"><span>剩余SOC低告警</span></li>
                                <li id="ic"><span>放电MOS状态</span></li>
                                <li id="id"><span>充电MOS状态</span></li>
                                <li id="ie"><span>预充MOS状态</span></li>
                                <li id="if"><span>充电限流状态</span></li>
                                <li id="ig"><span>加热系统状态</span></li>
                                <li id="ih"><span>风扇状态</span></li>
                                <li id="ii"><span>系统在线使能状态</span></li>
                                <li id="ij"><span>并联工作状态</span></li>
                                <li id="ik"><span>并联放电使能状态</span></li>
                                <li id="il"><span>并联充电使能状态</span></li>
                                <li id="im"><span>并联功能使能状态</span></li>
                            </ul>
                        </div>
            </div>
        </div>
    </div>
    <div style="border: 1px solid #8e8b8b;display:inline-block;width: 100%;text-align: right;" >
        <div style="display: inline-flex;width: 15%;border-left: 1px solid #8e8b8b;">111</div>
        <div style="display: inline-flex;width: 15%;border-left: 1px solid #8e8b8b;">222</div>
        <div style="display: inline-flex;width: 15%;border-left: 1px solid #8e8b8b;">333</div>
    </div>
</div>


</body>
<script>
    window.$ = window.jQuery = require('./public/js/jquery.min.js');
    let serialport = require('serialport');
    let port = null;
    // serialport.list((err, ports) => {
    //     for (let item of ports) {
    //         $('.com').append(`<option>${item.comName}</option>`)
    //     }
    //     console.log(ports);
    // });
    $('.btn-submit').click((data) => {
        let COM = $('select option:selected').text();
        let BaudRate = $('#BaudRate').val();
        console.log(COM);
        console.log(BaudRate);
        port = new serialport(COM, {
            baudRate: parseInt(BaudRate)
        });
        // $('.receive-windows').text(`打开串口: ${COM}, 波特率: ${BaudRate}`);
        // $('.receive-windows').append('<br/>=======================================<br/>');
        port.on('data', data => {
            console.log(`DATA: ${data}`);
            // $('.receive-windows').append(data.toString());
        });
    });
    // 点击发送信息
    // $('.btn-send').click(() => {
    //     var sendData = $('.input-send-data').val();
    //     if (port != {} && port != null) {
    //         console.log(`SendData: ${sendData}`);
    //         port.write(sendData);
    //     }
    // })
    // // 清空信息
    // $('.btn-reset').click(() => {
    //     $('.input-send-data').val('');
    // })
//异步排列端口
async function listSerialPorts() {
  await serialport.list().then((ports, err) => {
    if(err) {
      document.getElementById('error').textContent = err.message
      return
    } else {
      document.getElementById('error').textContent = ''
    }
    console.log('ports', ports);
    $('.com').empty(); // remove() 不是清空这个元素，而是把它删除掉，删都删掉了还怎么看到-清空用 empty()
        for (let item of ports) {
            $('.com').append(`<option>${item.comName}</option>`)
        }
    if (ports.length === 0) {
      document.getElementById('error').textContent = 'No ports discovered'
    }

    // tableHTML = tableify(ports)
    // document.getElementById('ports').innerHTML = tableHTML
  })
}

// Set a timeout that will check for new serialPorts every 2 seconds.
// This timeout reschedules itself.
setTimeout(function listPorts() {
  listSerialPorts();
  setTimeout(listPorts, 2000);
}, 2000);
// function sleep(){ 
//     console.log('1111_');
// }

//指示灯状态颜色变化
var lights = ['ea','eb','ec','ed','ee','ef','eg','eh','ei','ej','ek','el','em','en','eo','ep','fa','fb','fc','fd','fe','ff','fg','fh','fi','ga','gb','gc','gd','ge','gf','gg','gh','gi','gj','gk','gl','gm','gn','go','ha','hb','hc','hd','he','hf','hg','hh','hi','hj','hk','hl','hm','hn','ho','hp','ia','ib','ic','id','ie','if','ig','ih','ii','ij','ik','il','im'];
var temp_color = '';
async function runlight(item){
    // lights.forEach(function(item,key){
        // $('#'+ item).attr('style','color: red;');
        $(document.getElementById(item)).attr('style','color: red;');
        if ( temp_color != '')  $(document.getElementById(temp_color)).attr('style','color: green;');
        temp_color = item;
    // })
}

//状态数值变化
var statusName = ['aa','ab','ac','ad','ae','af','ag','ah','ba','bb','bc','bd','be','bf','bg','bh','ca','cb','cc','cd','ce','cf','cg','ch','ci'];
function runstatus(item){
        $(document.getElementById(item)).text(Math.random() * 10);
}
//USB图片
subimgs = ['./public/img/usb1.png','./public/img/usb2.png','./public/img/usb3.png'];
function usb_status(usbimg){
    $(document.getElementById('usbstatus')).attr('src',usbimg);
}

//电池电量
var b = document.querySelector("#animated .battery");
var i = 0,j = 0 ,k= 0;
(function updateBattery() {
    var battery_num = Math.floor(Math.random() * 11)
    b.dataset.charge = battery_num;
    $('#batteryw').text(battery_num*10 + '%');
    runlight(lights[i]);
    i = (i <= lights.length) ? ++i : 0;
    runstatus(statusName[j]);
    j = (j <= statusName.length) ? ++j : 0;
    usb_status(subimgs[k]);
    k = (k < subimgs.length -1) ? ++k : 0;
    setTimeout(updateBattery, 1000);
})();	  
window.onload=runlight;  
</script>

</html>